<template>
  <div>
    <div class="container">
      <!-- 内容1 -->
      <div class="index_item1">
        <div class="index_title">
          超级简历
          <div class="item1_a" @click="runtu"></div>
        </div>
        <div class="index_imgs">
          <div class="swiper">
            <van-swipe
              class="my-swipe"
              :autoplay="3000"
              indicator-color="white"
            >
              <van-swipe-item v-for="item in bannerLists" :key="item.id">
                <router-link
                  tag="div"
                  :to="{ name: 'atising', query: { id: item.name } }"
                >
                  <img :src="item.srcs" alt="" />
                </router-link>
              </van-swipe-item>
              <template #indicator>
                <div class="custom-indicator"></div>
              </template>
            </van-swipe>
          </div>
        </div>
      </div>
      <!-- 内容1 END-->

      <!-- 特殊按钮 -->
      <div class="indexCard">
        <div class="Card_item">
          <router-link
            :to="{ name: 'template', query: { id: 'dn' } }"
            tag="div"
            class="Card_imgs"
          >
            <img src="../assets/imgs/案例.png" alt="" />
            <div class="Card_text">大牛案例</div>
          </router-link>
          <div class="Card_imgs" @click="gotfun">
            <img src="../assets/imgs/修改1.png" alt="" />
            <div class="Card_text">简历修改</div>
          </div>
          <router-link
            :to="{ name: 'atising', query: { id: 'one',ss:'aa' } }"
            tag="div"
            class="Card_imgs"
          >
            <img src="../assets/imgs/分析.png" alt="" />
            <div class="Card_text">数据分析</div>
          </router-link>
          <router-link to="/purpose" tag="div" class="Card_imgs">
            <img src="../assets/imgs/意向.png" alt="" />
            <div class="Card_text">求职意向</div>
          </router-link>
        </div>
      </div>
      <!-- 特殊按钮 END-->

      <!-- 添加1 -->
      <div class="index_item2" v-if="!oniu">
        <div class="index_title">我的简历</div>
        <div class="index_box" @click="runtu">
          <p><i class="into"></i>新建/导入简历</p>
        </div>
      </div>
      <!-- 添加1 END-->

      <!-- 显示新建简历 -->
      <router-link tag="div" to="creator" class="myresume" v-if="oniu">
        <div class="mybtn" @click.stop="tos">导出</div>
        <div class="index_title">我的简历</div>
        <div class="mybox">
          <div class="myimg">
            <img src="../assets/imgs/icons/ic_launcher.png" alt="" />
          </div>
          <div class="mytext">
            <p>吃瓜者</p>
            <div class="text">
              <span>80分</span>
              <span>中文</span>
            </div>
          </div>
        </div>
      </router-link>
      <!-- 显示新建简历 END-->

      <!-- 去看看 -->
      <router-link to="/" tag="div" class="goto">
        <div class="goto_imgs">
          <img src="../assets/imgs/头像.jpg" alt="" />
        </div>
        <div class="goto_text">
          <p class="goto_title">高薪运营Offer冲刺群</p>
          <p>30天获得运营实习证明</p>
        </div>
        <div class="goto_btn">去看看></div>
      </router-link>
      <!-- 去看看 END-->

      <!-- 推荐简历 -->
      <div class="index_item2">
        <div class="index_title2 item2">
          推荐简历
          <div class="item2_more">
            <router-link to="/template" tag="span">查看更多</router-link>
          </div>
        </div>
      </div>
      <!-- 推荐简历 END-->

      <!-- 推荐简历样式 -->

      <div class="resume">
        <div class="resume_title">
          <h3>经典工作模板</h3>
        </div>
        <div class="resume_btn">
          <div :class="['resume_ch', flag ? 'con' : '']" @click="flag = true">
            中文
          </div>
          <div :class="['resume_ch', flag ? '' : 'con']" @click="flag = false">
            英文
          </div>
        </div>
      </div>
      <div class="resume_imgs" @click="runto">
        <div class="rsch" v-show="flag">
          <img src="../assets/imgs/简介详情.jpg" alt="" />
        </div>
        <div class="rsch" v-show="!flag">
          <img src="../assets/imgs/Entxs.jpg" alt="" />
        </div>
        <div class="resume_text">
          <p>工作经验一年以上，想要变动工作的人士，适用于全行业</p>
        </div>
      </div>

      <!-- 推荐简历样式 END-->

      <!-- 大厂内推 -->
      <div class="bignt" v-if="!checked">
        <div class="index_item2">
          <div class="index_title2 item2">
            大厂内推
            <div class="item2_more">
              <router-link to="/" tag="span">查看更多</router-link>
            </div>
          </div>
        </div>

        <!-- 入群端口 -->
        <router-link to="/" tag="div" class="Recom">
          <div class="Recom_imgs">
            <img src="../assets/imgs/头像.jpg" alt="" />
          </div>
          <div class="Recom_text">
            <p class="Recom_title">大厂内推</p>
            <div class="Recom_list">
              <div class="Recom_item">互联网</div>
              <div class="Recom_item">已上市</div>
              <div class="Recom_item">1000-9999人</div>
            </div>
          </div>
          <div class="Recom_btn">48个职位></div>
        </router-link>

        <div class="Recom_text2">
          <span>本公司是中国领先的互联网媒体、在线游戏集团，是一个</span>
        </div>
        <div class="Recom_box">
          <div class="Recom_box_list">
            <div
              class="Recom_box_items"
              v-for="item in boxlists"
              :key="item.id"
            >
              <router-link to="/" tag="div">
                <div v-show="!item.cheacked">
                  <img :src="item.srcs" alt="" />
                </div>
                <div class="box" v-show="item.cheacked">
                  <div class="logo">
                    <img :src="item.srcs" alt="" />
                  </div>
                  <div class="box_text">
                    <p>{{ item.text1 }}</p>
                    <span>{{ item.text2 }}</span>
                  </div>
                </div>
              </router-link>
            </div>
          </div>
        </div>
      </div>
      <!-- 大厂内推 END-->

      <!-- 大牛简历 -->
      <div class="index_item2">
        <div class="index_title2 item2">
          大牛简历
          <div class="item2_more">
            <router-link
              :to="{ name: 'template', query: { id: 'dn' } }"
              tag="span"
              >查看更多</router-link
            >
          </div>
        </div>
      </div>
      <div class="Murc">
        <ul class="Murc_list">
          <li v-for="item in murclist" :key="item.id">
            <router-link
              :to="{ name: 'template', query: { id: 'dn' } }"
              tag="div"
              class="Murc_lista"
              >{{ item.name }}</router-link
            >
          </li>
          <li class="list_more">
            <router-link
              :to="{ name: 'template', query: { id: 'dn' } }"
              tag="div"
              class="Murc_lista"
              >...</router-link
            >
          </li>
        </ul>
      </div>
      <div class="record">
        <div
          class="record_items"
          v-for="item in recordlists"
          :key="item.id"
          @click="runto"
        >
          <div class="record_imgs">
            <img :src="item.srcs" alt="" />
          </div>
          <div class="record_text">{{ item.texts }}</div>
        </div>
      </div>
      <!-- 大牛简历 END-->
    </div>

    <!-- 底部固定导航栏 -->
    <div class="shroud">
      <div class="container container_ji">
        <div class="shroudPanel">
          <div class="icon">
            <router-link to="/home" tag="div" class="iconrun"></router-link>
            <div class="img index">
              <img
                src="../assets/imgs/src_assets_img_tab_tab_cv_selected.png"
                alt=""
              />
            </div>
            <span>首页</span>
          </div>
          <div class="icon">
            <router-link to="/jobwant" tag="div" class="iconrun"></router-link>
            <div class="img">
              <img
                src="../assets/imgs/src_assets_img_tab_tab_job_normal.png"
                alt=""
              />
            </div>
            <span>求职</span>
          </div>
          <div class="icon">
            <router-link to="/curr" tag="div" class="iconrun"></router-link>
            <div class="img">
              <img
                src="../assets/imgs/src_assets_img_tab_tab_lesson_normal.png"
                alt=""
              />
            </div>
            <span>课程</span>
          </div>
          <div class="icon">
            <router-link to="/message" tag="div" class="iconrun"></router-link>
            <div class="img message">
              <img
                src="../assets/imgs/src_assets_img_tab_tab_message_normal.png"
                alt=""
              />
              <ul class="list_message">
                <!-- <div class="message_sum">99+</div> -->
              </ul>
            </div>
            <span class="con">消息</span>
          </div>
          <div class="icon">
            <router-link to="/personal" tag="div" class="iconrun"></router-link>
            <div class="img">
              <img
                src="../assets/imgs/src_assets_img_tab_tab_me_normal.png"
                alt=""
              />
            </div>
            <span>我</span>
          </div>
        </div>
      </div>
    </div>
    <div class="shr"></div>
    <!-- 底部固定导航栏 END-->
  </div>
</template>

<script>
import { getJsonData } from "../api/home.js";

export default {
  data() {
    return {
      flag: true,
      murclist: null,
      boxlists: null,
      bannerLists: null,
      cardlists: null,
      recordlists: null,
      oniu: null,
      creator: null,
      checked:true,
    };
  },
  methods: {
    getMurclistFun() {
      getJsonData().then((data) => {
        this.murclist = data.murclist;
      });
    },
    getBoxlistsFun() {
      getJsonData().then((data) => {
        this.boxlists = data.boxlists;
      });
    },
    getBannerListsFun() {
      getJsonData().then((data) => {
        this.bannerLists = data.bannerLists;
      });
    },
    getCardlistsFun() {
      getJsonData().then((data) => {
        this.cardlists = data.cardlists;
      });
    },
    getRecordlistsFun() {
      getJsonData().then((data) => {
        this.recordlists = data.recordlists;
      });
    },
    getoniuFun() {
      this.oniu = localStorage.getItem("oniu");
      console.log(this.oniu);
    },
    getCreatlistFun() {
      this.creator = JSON.parse(localStorage.getItem("keys"));
      console.log("启动getCreatlistFun1");
    },
    getCheckedFun() {
      this.checked = JSON.parse(localStorage.getItem("checked"));
      console.log("启动getCheckedFun1");
    },
    gotfun() {
      if (!localStorage.getItem("oniu")) {
        // this.$emit("gotfun",false)
        this.$toast("尚未创建简历请创建");
        this.$router.push("template");
      } else {
        this.$router.push("creator");
      }
    },
    tos() {
      this.$toast("成功导出");
    },
    runtu() {
      // console.log(this.showon);
      this.$emit("runtu", true);
    },
    runto() {
      let itemid = "temps1";
      window.localStorage.setItem("itemid", itemid);
      this.$emit("runto", { a: true, itemid });
    },
  },
  created() {
    this.getMurclistFun();
    this.getBoxlistsFun();
    this.getBannerListsFun();
    this.getCardlistsFun();
    this.getRecordlistsFun();
    this.getoniuFun();
    this.getCreatlistFun();
    this.getCheckedFun();
  },
  watch: {
    creator: function () {
      this.getCheckedFun();
      this.getoniuFun();
      // this.getnewlistFun();
    },
  },
};
</script>

<style lang="scss" scoped>
.swiper {
  border-radius: 10px;
  padding: 0px 2px;
  overflow: hidden;
  img {
    width: 100%;
    display: block;
  }
  .custom-indicator {
    width: 100%;
    position: absolute;
    left: 0px;
    bottom: 0px;
    text-align: center;
    ul {
      display: inline-block;
      margin: 0 auto;
      li {
        display: inline-block;
        width: 6px;
        height: 2px;
        margin: 0px 2px;
        background-color: rgba(255, 255, 255, 0.6);
        &.con {
          background-color: #fff;
        }
      }
    }
  }
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 0px;
  text-align: center;
  background-color: #39a9ed;
}

.index_item1 {
  box-sizing: border-box;
  padding: 0 25px;
  .index_imgs {
    width: 100%;
    height: 100%;
    margin-bottom: 25px;
    border-radius: 10px;
    overflow: hidden;
  }
}
.index_title {
  position: relative;
  height: 52px;
  line-height: 52px;
  font-size: 22px;
  color: #000;
  position: relative;
  height: 52px;
  line-height: 52px;
  font-size: 22px;
  color: #000;
  .item1_a {
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    background: url(../assets/imgs/添加.png) no-repeat center center;
    background-size: 100%;
    top: 0px;
    bottom: 0px;
    right: 0px;
    margin: auto 0px;
  }
}
/* 特殊按钮 */
.indexCard {
  box-sizing: border-box;
  width: 100%;
  height: 110px;
  overflow: hidden;
  padding: 0px 20px;
  margin-top: 12px;
  .Card_item {
    display: flex;
    height: 110px;
    justify-content: space-around;
    align-items: center;
    border-radius: 10px;
    .Card_imgs {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 70px;
      height: 90px;
      img {
        width: 100%;
        display: block;
        margin-bottom: 10px;
      }
    }
  }
}
.Card_imgs {
  .Card_text {
    font-weight: 800;
    font-size: 14px;
    padding-bottom: 16px;
  }
}

/* 内容2 */
.index_item2 {
  box-sizing: border-box;
  padding: 0 25px;
  margin-top: 30px;
  .index_box {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    height: 85px;
    border-radius: 10px;
    background-color: rgba(85, 144, 248, 0.2);
    border: 1px dashed #538ef6;
    text-align: center;
    a {
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
      z-index: 99;
    }
    p {
      position: relative;
      width: 155px;
      height: 85px;
      line-height: 85px;
      font-size: 20px;
      right: 0px;
      left: 0px;
      margin: 0 auto;
      text-indent: 24px;
      color: #538ef6;
    }
  }
}

/*创建简历后*/
.myresume {
  height: 200px;
  box-sizing: border-box;
  margin: 50px 20px;
  position: relative;
  // border: 1px solid #000;
  .mybtn {
    position: absolute;
    width: 60px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 20px;
    color: #39a9ed;
    top: 80px;
    right: 15px;
    z-index: 100;
    background-color: rgba(83, 142, 246, 0.3);
    border-radius: 10px;
  }
  .mybox {
    height: 130px;
    display: flex;
    padding: 30px;
    padding-bottom: 0px;
    box-shadow: 0px 0px 10px #ccc;
    background-color: #f2f2f2;
    position: relative;
    &::after {
      content: "已经为你创建好了简历可以点击查看";
      width: 80%;
      height: 30px;
      line-height: 30px;
      display: block;
      text-indent: 30px;
      border-radius: 10px;
      position: absolute;
      bottom: 13px;
      right: 0px;
      left: 0px;
      margin: 0 auto;
      color: #333;
      background-color: rgba(57, 169, 237, 0.5);
    }
    .myimg {
      height: 80px;
      width: 80px;
      border-radius: 10px;
      overflow: hidden;
      img {
        display: block;
        height: 100%;
      }
    }
    .mytext {
      font-size: 26px;
      margin-left: 30px;
      .text {
        font-size: 12px;
        margin-top: 10px;
        span {
          display: inline-block;
          margin-right: 10px;
          background-color: #54a1ef;
          padding: 2px 6px;
          color: #f2f2f2;
          border-radius: 4px;
        }
      }
    }
  }
}

.index_box {
  p {
    .into {
      display: block;
      position: absolute;
      box-sizing: border-box;
      width: 21px;
      height: 21px;
      border-radius: 50%;
      top: 0px;
      bottom: 0px;
      margin: auto 0;
      background: url(../assets/imgs/添加2.png) no-repeat center center;
      background-size: 100%;
      opacity: 0.5;
      border: 1px solid #538ef6;
    }
  }
}
/* 去看看 */
.goto {
  display: flex;
  position: relative;
  height: 75px;
  border-radius: 10px;
  background-color: #fff;
  align-items: center;
  margin: 0px 25px;
  margin-top: 12px;
  a {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 99;
  }
}
.goto_imgs {
  width: 50px;
  height: 50px;
  border-radius: 5px;
  margin-left: 8px;
  margin-right: 10px;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
}
.goto_text {
  p {
    font-size: 12px;
    color: #999;
  }
  .goto_title {
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    color: #000;
    font-weight: 800;
  }
}
.goto_btn {
  position: absolute;
  font-size: 12px;
  width: 90px;
  text-indent: 40px;
  top: 18px;
  right: 14px;
  color: #999;
  background: url(../assets/imgs/group_icon.png) no-repeat left center;
  background-size: 40%;
}
/* 更多简历 */
.item2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .item2_more {
    position: relative;
    width: 85px;
    height: 30px;
    box-sizing: border-box;
    border-radius: 10px;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #999;
    a {
      display: block;
      width: 100%;
      height: 100%;
      font-weight: 800;
      position: absolute;
    }
  }
}
/* 推荐简历样式 */
.resume {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  margin: 0px 25px;
  margin-top: 16px;
  border-radius: 10px;
  border: 1px solid #f1f1f1;
  border-bottom: 0px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  .resume_title {
    margin-left: 25px;
    height: 60px;
    line-height: 60px;
  }
}
.resume_btn {
  margin-right: 25px;
  display: flex;
  height: 60px;
  align-items: center;
  .resume_ch,
  .resume_en {
    margin-left: 8px;
    box-sizing: border-box;
    height: 30px;
    line-height: 30px;
    padding: 0px 12px;
    font-size: 14px;
    border: 1px solid #afd1ea;
    border-radius: 4px;
    font-weight: 800;
    color: #54a1ef;
    background-color: #fff;
  }
  .con {
    border: 1px solid #afd1ea;
    border-radius: 4px;
    font-weight: 800;
    color: #fff;
    background-color: #4fa2ff;
  }
}

.resume_imgs {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  background-color: #fff;
  margin: 0px 25px;
  border-radius: 10px;
  border: 1px solid #f1f1f1;
  border-top: 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  overflow: hidden;
  img {
    width: 100%;
  }
  .resume_text {
    box-sizing: border-box;
    padding: 15px;
    font-size: 16px;
    color: #ccc;
  }
}
/* 大厂内推 */
.Recom {
  display: flex;
  position: relative;
  height: 75px;
  border-radius: 10px;
  background-color: #fff;
  align-items: center;
  margin: 0px 25px;
  margin-top: 12px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  a {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 99;
  }
}
.Recom_imgs {
  width: 50px;
  height: 50px;
  border-radius: 5px;
  margin-left: 8px;
  margin-right: 10px;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
}
.Recom_text {
  .Recom_title {
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    color: #000;
    font-weight: 800;
  }
}
.Recom_btn {
  position: absolute;
  font-size: 12px;
  width: 90px;
  top: 18px;
  right: 0px;
  color: #999;
}
.Recom_list {
  display: flex;
}
.Recom_item {
  font-size: 12px;
  color: #ccc;
}
.Recom_text2 {
  margin: 0px 25px;
  padding-top: 12px;
  background-color: #fff;
  span {
    display: block;
    background-color: #fff9ed;
    margin: 0px 10px;
    height: 34px;
    line-height: 34px;
    color: #e57811;
    font-size: 12px;
    padding: 0px 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 14px;
  }
}
/* 选项按钮 */
.Recom_box_list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin: 0px 25px;
  box-sizing: border-box;
  padding: 0px 10px;
}
.Recom_box_items {
  width: 47%;
  position: relative;
  border: 1px solid #ccc;
  margin-bottom: 10px;
  border-radius: 10px;
  overflow: hidden;
  img {
    display: block;
    width: 100%;
    height: 62px;
  }
  .box {
    width: 100%;
    box-sizing: border-box;
    padding: 7px;
    overflow: hidden;
    display: flex;
    .logo {
      width: 50px;
      height: 50px;
      margin-right: 10px;
      text-align: center;
      img {
        // width: 50px;
        height: 100%;
        display: block;
      }
    }
    .box_text {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      p {
        font-size: 18px;
        line-height: 18px;
        font-weight: 6 00;
        color: #333;
      }
      span {
        font-size: 14px;
        line-height: 14px;
        color: #ccc;
      }
    }
  }
}
/* 大牛简历 */
.Murc {
  margin: 15px 25px;
  margin-right: 0px;
}
.Murc_list {
  display: flex;
  justify-content: space-between;
  li {
    margin-right: 8px;
    .Murc_lista {
      display: block;
      padding: 0px 14px;
      height: 24px;
      line-height: 24px;
      font-size: 12px;
      color: #333;
      text-align: center;
      background-color: #ccc;
      border-radius: 5px;
    }
  }
  .list_more {
    margin: 0px;
  }
}
.record {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0px 25px;
}
.record_items {
  display: flex;
  width: 30%;
  flex-direction: column;
  align-items: center;
  margin-bottom: 15px;
  margin-top: 5px;
  img {
    width: 100%;
  }
  .record_text {
    width: 100%;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
/* 底部固定导航栏 */
.shr {
  height: 52px;
}
.shroud {
  position: fixed;
  bottom: 0px;
  right: 0px;
  left: 0px;
  .shroudPanel {
    display: flex;
    height: 52px;
    justify-content: space-between;
    text-align: center;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
    background-color: #ffffff;
    & > .icon {
      margin-right: 17px;
      box-sizing: border-box;
      position: relative;
      margin-left: 17px;
      height: 52px;
      padding-top: 4px;
      flex: 1;
      .iconrun {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 999;
      }
      .img {
        img {
          width: 26px;
          height: 26px;
        }
      }
    }
    .icon {
      & > span {
        display: block;
        font-size: 9px;
        color: #5d5d5d;
        height: 10px;
        line-height: 10px;
      }
      & > .con {
        color: #555565;
      }
    }
  }
}
.message {
  position: relative;
  .list_message {
    position: absolute;
    width: 19px;
    height: 30px;
    top: 0px;
    left: 0px;
    right: 0px;
    margin: 0 auto;
  }
  .message_sum {
    position: absolute;
    box-sizing: border-box;
    width: 28px;
    height: 18px;
    background-color: #ff522d;
    border: 1px solid #fb4d2a;
    font-size: 12px;
    color: #fff;
    border-radius: 10px;
    top: -5px;
    right: -20px;
  }
}
.list_message {
  .item_message {
    display: block;
    float: left;
    width: 3px;
    height: 3px;
    margin-top: 11px;
    margin-left: 3px;
    background-color: #fff;
  }
}
</style>